
<template>
	<div class="result" :style="{'height':relHeight}">	
		<!--结束问诊-->
		<div class="result-finish-wrap" v-if="pathNum==2">
			<div class="left" @click="finishInquisition">
				<p>
					<img src="../assets/img/end-inquiry-img.svg" alt="robot" class="result-finish-img">					
				</p>
				<p style="margin-top:-.1rem;color:#888;">结束问诊</p>
			</div>
			<div class="left">
				<span class="continue-btn" @click="continueInquisition">					
					继续问诊
					<img src="../assets/img/continue-inquiry-img.svg" alt="img" class="result-finish-img"/>
				</span>
			</div>
		</div>
		<div class="result-con-wrap">
			<div class="result-top clearfix">
				<p class="left header-img">
					<img src="../assets/img/logo.png" alt="img" />
				</p>
				<div class="left header-info">
					<p class="result-info-name">{{record.nickname}}</p>
					<p class="result-info-detail clearfix">
						<span class="left">{{record.gender}}|{{record.age}}岁</span>						
					</p>
				</div>
			</div>
			<!--个人信息和排行-->
			<div class="result-con" :class="{ 'this-result-con':this.showFinishBtn }">
				<div class="result-box-part1">
					<!--收起-->
					<p class="take-up-open" @click="changeOpenStatus">
						<img src="../assets/img/take-up-open.svg" alt="img" class="open-default"
							:class="[showResultDetail?'open-transform':'']"/>
						{{wordText}}
					</p>
					<p class="text-left box-part-title">个人信息</p>
					<p class="result-box-detail clearfix">
						<!--身高-->
						<span class="left" v-if="record.vitalSign && record.vitalSign.height">
							<img src="../assets/img/result1.svg" alt="img" />
							{{record.vitalSign.height}}cm
						</span>
						<!--体重-->
						<span class="left" v-if="record.vitalSign && record.vitalSign.weight">
							<img src="../assets/img/result2.svg" alt="img" />
							{{record.vitalSign.weight}}kg
						</span>
						<!--温度-->
						<span class="left" v-if="record.vitalSign && record.vitalSign.temperature">
							<img src="../assets/img/result3.svg" alt="img" />
							{{record.vitalSign.temperature}}kg
						</span>
						<!--舒张压-->
						<span class="left" v-if="record.vitalSign && record.vitalSign.diastolicBloodPressure">
							<img src="../assets/img/result4.svg" alt="img" />
							{{record.vitalSign.diastolicBloodPressure}}mmhg
						</span>
						<!--收缩压-->
						<span class="left" v-if="record.vitalSign && record.vitalSign.systolicBloodPressure">
							<img src="../assets/img/result4.svg" alt="img" />
							{{record.vitalSign.systolicBloodPressure}}mmhg
						</span>
						<!--心率-->
						<span class="left" v-if="record.vitalSign && record.vitalSign.heartRate">
							<img src="../assets/img/result5.svg" alt="img" />
							{{record.vitalSign.heartRate}}次/分
						</span>
						<!--呼吸-->
						<span class="left" v-if="record.vitalSign && record.vitalSign.breathingRate">
							<img src="../assets/img/result6.svg" alt="img" />
							{{record.vitalSign.breathingRate}}次/分
						</span>
					</p>
					<div class="result-symptoms-list" v-show="!showResultDetail">
						<p class="text-left" style="color:#ccc;">你的症状</p>
						<div class="result-your-symptoms-list text-left clearfix">
							<p class="left" v-for="(item,index) in allSymList">{{item.name}}</p>
						</div>
					</div>
					<div v-show="showResultDetail" class="fadeInDown">
						<div style="border-bottom:1px dashed #ccc;margin:.4rem 0;">
							<p class="text-left result-detail-title">您输入的症状</p>
							<div class="modify-input-style">
								 <Timeline>
							        <Timeline-item v-for="(itemInput,index) in record.inputSymptoms">
							            <p class="time">{{itemInput.name}}</p>
							            <p class="content">
							            		<span v-for="(itemInputSon,index) in itemInput.attrs">{{itemInputSon}}</span>
							            </p>
							        </Timeline-item>	
							    </Timeline>
							</div>
						</div>
						<div>
						<p class="text-left result-detail-title" v-if="inquiriesList.length>0">追问的症状</p>
							<div class="modify-inquiries-style">
								 <Timeline>
							        <Timeline-item v-for="(itemInquiries,index) in inquiriesList">
							            <p class="time">{{itemInquiries.name}}</p>
							            <p class="content">
							            		<span v-for="(itemInquiriesSon,index) in itemInquiries.attrs">{{itemInquiriesSon}}
							            			<span v-if="index!=itemInquiries.attrs.length-1"> | </span>
							            		</span>
							            </p>
							        </Timeline-item>
							        				        
							    </Timeline>
							</div>
						</div>
					</div>
				</div>
				<div class="result-box-part2">
					<p class="text-left box-part-title">可能得疾病排行</p>
					
					<div v-for="(item,index) in record.diagnoses" >
						<!--第一个-->
						<div class="clearfix possible-disease-item" v-if="index==0">
							<div class="left disease-left-one">
								<div style="width:.56rem;height:.56rem;">
									<x-circle
							        :percent="parseInt(item.weight*100)"
							        :stroke-width="8"
							        stroke-color="#1CB9B5">
							        <span>{{(index+1)}}</span>
							      </x-circle>
								</div>
							</div>							
							<div class="left disease-left-two" @click="toWikiPage(item.id,index)">
								<p class="text-left">{{item.text}}</p>
								<div class="text-left">
									<p class="department-span">
										<img src="../assets/img/coordinate.svg" alt="img" class="coordinate"/>
										{{item.department.name}}
									</p>
								</div>
							</div>
							<p class="right iconfont" @click="toWikiPage(item.id,index)" style="color:#C7C7CC;">&#xe62b;</p>
						</div>
						<!--第二个之后的-->
						<div class="clearfix possible-disease-item" v-else-if="index==1 ||index==2">
							<div class="left disease-left-one">
								<div style="width:.56rem;height:.56rem;" class="left">
									<x-circle
							        :percent="parseInt(item.weight*100)"
							        :stroke-width="8"
							        stroke-color="#1CB9B5">
							        <span>{{(index+1)}}</span>
							      </x-circle>
								</div>
							</div>							
							<p class="left text-left" @click="toWikiPage(item.id,index)">{{item.text}}</p>
							<p class="right iconfont" @click="toWikiPage(item.id,index)" style="color:#C7C7CC;">&#xe62b;</p>
						</div>						
						<!--第三个之后的-->
						<div class="clearfix possible-disease-item" v-else>
							<p class="left disease-left-one disease-left-spe">{{(index+1)}}</p>
							<p class="left" @click="toWikiPage(item.id,index)">{{item.text}}</p>
							<p class="right iconfont" @click="toWikiPage(item.id,index)" style="color:#C7C7CC;">&#xe62b;</p>
						</div>						
					</div>																
				</div>
				<!--人工智能技术提供者-->
				<!--<div>
					<p style="color:#000;">人工智能技术由大数医达提供</p>
				</div>-->
				<!--删除-->
				<div class="delete-result" v-show="pathNum===1">
					<p style="color:#D73865;" @click="showActionSheetFn">删除记录</p>
				</div>
			</div>
		</div>
		<!--删除确定信息-->
		 <actionsheet v-model="showActionSheet" :menus="menus" show-cancel @on-click-menu="clickMenus"></actionsheet>	
	</div>
</template>

<script>
	import {XCircle,Actionsheet} from 'vux'
	import {Timeline} from 'iView'
	import {mapState} from 'vuex'
	
	import {urlSavePreview,urlInquiryRecord,urlDeleteRecord,urlTalk} from '../api/api'
	export default {
        name: 'Search',
        data(){
            return{
            		relHeight:'', 
            		percent: 50,
            		showResultDetail:false,
            		showFinishBtn:true,//判断显示结束问诊按钮
            		wordText:'展开',
            		showActionSheet:false,
          		menus: [
          			{
				        label: '删除后将不会出现在问诊记录列表中',
				        type: 'Default'
			      	}, 
			      	{
				        label: '删除',
	      				type: 'warn'
			      	},
          		],
          		record:'',
          		pathNum:0,
          		inquiriesList:[],
          		allSymList:[],
          		diffArr:[]
            }
        },  
        components: {
		    XCircle,
		    Timeline,
		    Actionsheet		    
		},
        computed: {
            ...mapState(['diagnosisGlobal','continueFlag','snGlobal','finishInqFlagGlobal'])
        },
        created(){
        		//获取页面高度
	    		this.$nextTick(() => {
				this.relHeight=document.documentElement.clientHeight+'px'
          	}) 
        },
        mounted(){
        		this.pathNum=this.$route.params.path;
	    		//判断this.$route.params.path==2是从inquiry进入，path==1是从record进入
	    		if(this.$route.params.path==1){
	    			this.urlInquiryRecordFn();
	    		}else if(this.$route.params.path==2){
	    			this.urlSavePreviewFn();
	    		}	    			    		
	    	},
        methods:{ 
        		changeOpenStatus(){
				this.showResultDetail=this.showResultDetail==false?true:false;	
				if(this.showResultDetail==false){
					this.wordText='展开';
				}else{
					this.wordText='收起';
				}       			
        		},
        		showActionSheetFn(){
        			this.showActionSheet=true;
        		},
        		clickMenus(key, item){
        			console.log(item);
        			if(key!='cancel'){
        				this.urlDeleteRecordFn();
        			}       			
        		},
        		toWikiPage(id,index){
        			this.$store.dispatch('diagnosisGlobalFn', this.record);
        			this.$store.dispatch('distinguishGlobalFn', this.inquiriesList);
        			this.$router.push({name:'wiki',params:{id:id,index:index}});
        		},
        		//点击继续问诊回到问诊页面
        		continueInquisition(){
        			this.$router.push({name: 'inquiry'});
      			this.$store.dispatch('continueFlagFn',true)
        		},
        		arrayDifferenceFn(arr1,arr2) {
			    //遍历所有症状，提出用户选择的症状
				arr1.map(function(itemSymptoms, key){
					var searchName = itemSymptoms.name,
					    exsitName = false;
					arr2.map(function(itemInputSymptoms, iKey){
						if(itemInputSymptoms.name == searchName){
							exsitName = true;
						}
					});			
					if (exsitName === true) {
						//arr1.splice(key,1) splice方法不可取，虽然截取掉了重复出现的元素，但是数组索引被打乱
						delete arr1[key];
					};
					
				});
				this.diffArr = arr1;
			},
			successFn(param1,param2){
				let Arr1=JSON.parse(JSON.stringify(param1)),
	                Arr2=JSON.parse(JSON.stringify(param2)),
	            		res=this.arrayDifferenceFn(Arr1,Arr2);
				if(this.diffArr){
					//把追问症状组成list
					let resArr=JSON.parse(JSON.stringify(this.diffArr));
					let resArrLength=resArr.length-1;
					for(var i=resArrLength; i>=0; i--){
						if(resArr[i] == null || !resArr[i]){
							resArr.splice(i, 1);
						}
					}
					this.inquiriesList=resArr;
					this.allSymList=Arr2.concat(this.inquiriesList);
				}else{
					this.allSymList=arr2;
				}
			},
        		urlInquiryRecordFn(){
        			let sendData={
        				id:this.$route.params.id
        			};
        			urlInquiryRecord(sendData).then(response => {
		            this.record=response.data.record;	
		            this.successFn(response.data.record.symptoms,response.data.record.inputSymptoms);					
				}).catch(error => {
	           	    console.log('error')
	            });
        		},
        		urlSavePreviewFn(){
        			let sendData={
        				sid:this.$route.params.id
        			}; 
        			urlSavePreview(sendData).then(response => {
		            this.record=response.data.record;
		            console.log(response.data.record.symptoms,'response.data.record.symptoms')
		            this.successFn(response.data.record.symptoms,response.data.record.inputSymptoms);
				}).catch(error => {
	           	    console.log('error')
	            });
        		},
        		urlDeleteRecordFn(){
        			let sendData={
        				id:this.$route.params.id
        			};
        			urlDeleteRecord(sendData).then(response => {
        				this.$router.push({name: 'inquiry'});
        				this.$store.dispatch('continueFlagFn',true)
				}).catch(error => {
	           	    console.log('error')
	            });
        		},
        		finishInquisition(){
        			this.$router.push({name: 'inquiry'});
        			this.$store.dispatch('finishInqFlagGlobalFn',true)
        		}
        },
		
    }
</script>

<style>
	@import url("../assets/css/result.css");
</style>